<template>
  <el-card shadow="always">
    <!-- <div slot="header">课程管理{{ getBtnAut }}</div> -->
    <div slot="header">课程管理【{{ getBtnAutMixin }}】</div>
    <!-- card body -->
    <div class="btns">
      <div>
        <el-input
          placeholder="课程关键字"
          size="mini"
          clearable
          @clear="queryReset()"
          v-model="params.cname"
        ></el-input>
        <el-input
          placeholder="教师关键字"
          size="mini"
          clearable
          @clear="queryReset()"
          v-model="params.tname"
        ></el-input>
        <el-input
          placeholder="系名关键字"
          size="mini"
          clearable
          @clear="queryReset()"
          v-model="params.department"
        ></el-input>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="queryReset()"
          >查询</el-button
        >
      </div>
      <el-button
        v-if="(getBtnAutMixin & 2) == 2"
        type="success"
        size="mini"
        icon="el-icon-plus"
        @click="addDialog = true"
        >新增</el-button
      >
    </div>
    <!--
      通过ElementUI 组件的 height 属性设置表格高度为 任意值，激活滚动条
      通过弹性盒子规则，将表格内容的高度设置为填充剩余高度
    -->
    <el-table :data="list" border size="mini" height="200">
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column label="课程名称" prop="course_name"></el-table-column>
      <el-table-column label="代课教师" prop="teacher_name"></el-table-column>
      <el-table-column label="所属院系" prop="department_name" width="200"></el-table-column>
      <el-table-column label="年级" prop="course_grade" width="60"></el-table-column>
      <el-table-column label="学分" width="60">
        <template #default="{ row }">
          <el-tag size="mini" effect="dark">{{ row.course_credit }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column 
        label="上课时间" 
        prop="course_time"
      ></el-table-column> -->
      <!-- <el-table-column label="上课时间">
        <template #default="{ row }">
          {{ weeks[row.course_time.split("-")[0]] }}
          ……
        </template>
      </el-table-column> -->
      <el-table-column
        label="上课时间"
        prop="course_time"
        :formatter="timeFormatter"
      ></el-table-column>
      <el-table-column label="已选" width="60">
        <template #default="{ row }">
          <el-tag type="success" size="mini" effect="dark">{{ row.course_selected_count }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="座位数" width="60">
        <template #default="{ row }">
          <el-tag type="info" size="mini" effect="dark">{{ row.course_max_size }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button v-if="(getBtnAutMixin & 4) == 4" type="text" size="mini" @click="openEdit(row)"
            >编辑</el-button
          >
          <!-- <el-popconfirm>
            <template #reference>
              <el-button type="text" size="mini">删除</el-button>
            </template>
          </el-popconfirm> -->
          <!-- vue组件绑定的匿名数据，也是不会被构建成响应式的 -->
          <ConfirmButton
            v-if="(getBtnAutMixin & 8) == 8"
            :popconfirm="{ title: `确认删除 “${row.course_name}” 课程?` }"
            :button="{ type: 'text', size: 'mini' }"
            @confirm="removeCourse(row.course_id)"
            >删除</ConfirmButton
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :total="total"
      :current-page="params.pageNo"
      :page-size="params.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="changePage"
      @size-change="changeSize"
    ></el-pagination>

    <AddCourseDialog
      title="新课程添加"
      width="600px"
      :visible.sync="addDialog"
      @reload="findCourseList"
    ></AddCourseDialog>

    <!--
      1. 模态窗打开后，如何确认应该回显的数据内容是那条数据?
        => 解决方式1：依赖与后端接口，前端只需要提供对应的id关键字值即可
        => 解决方式2：依赖前端从列表中获取对象的数据对象，进行数据回显操作
        具体实现：通过事件接收对应的数据对象(只获取id,也可以获取完整对象)，
                在事件对应的方法中通过形参获取参数，通过修改变量开启模态窗
    -->
    <EditCourseDialog
      v-if="editDialog"
      ref="editDialog"
      title="课程编辑"
      width="600px"
      :visible.sync="editDialog"
      @reload="findCourseList"
    ></EditCourseDialog>
  </el-card>
</template>

<script>
import AddCourseDialog from "./dialog/AddCourseDialog";
import EditCourseDialog from "./dialog/EditCourseDialog";
import { deleteCourseById, selectCourseList } from "@/api/course";
import { weeks } from "@/constant";
export default {
  components: {
    AddCourseDialog,
    EditCourseDialog,
  },
  data() {
    return {
      // weeks: [
      //   "星期日",
      //   "星期一",
      //   "星期二",
      //   "星期三",
      //   "星期四",
      //   "星期五",
      //   "星期六",
      // ],
      weeks,
      total: 0,
      list: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        cname: "",
        tname: "",
        department: "",
      },
      addDialog: false,
      editDialog: false,
    };
  },
  // 通过提供全局mixin方案，实现为所有组件提供按钮权限加载的方法
  // computed: {
  //   getBtnAut() {
  //     let m = this.$store.state.menus.filter((item) => item.right_path == "/home/admin/course");
  //     return m[0].right_function;
  //   },
  // },
  methods: {
    timeFormatter(row, column, cellValue) {
      // console.log("timeFormatter", cellValue);
      // return "test";
      if (cellValue == null) {
        return "";
      } else {
        let [w, s, e] = cellValue.split("-");
        return `${this.weeks[w]} 第${s * 1 + 1}节至第${s * 1 + e * 1}节`;
      }
    },
    async findCourseList() {
      let { data } = await selectCourseList(this.params);
      this.list = data.list;
      this.total = data.total;
    },
    queryReset() {
      this.params.pageNo = 1;
      this.findCourseList();
    },
    changeSize(pageSize) {
      this.params.pageNo = 1;
      this.params.pageSize = pageSize;
      this.findCourseList();
    },
    changePage(pageNo) {
      // console.log(pageNo);
      this.params.pageNo = pageNo;
      this.findCourseList();
    },
    async removeCourse(cid) {
      console.log("删除课程");
      await deleteCourseById({
        course_id: cid,
      });
      this.findCourseList();
    },
    openEdit(obj) {
      console.log(obj);

      // 模态窗的弹窗是当前改为true后才被创建
      this.editDialog = true;
      // 因为vue的响应式数据变化触发的页面更新，是一个异步更新队列操作，
      // 所以数据变量不表示页面立即更新，所以后续代码立即对页面做的操作都会失效
      this.$nextTick(() => {
        // 必须保证在模态窗组件创建完成后，才能操作数据回显功能
        // 编辑弹窗的 组件 实例 对象
        // console.log(this.$refs.editDialog);
        // 获取编辑 弹窗 组件 实例 的参数 params
        // console.log(this.$refs.editDialog.params);
        // 为编辑 弹窗 组件 实例 的参数 params 进行 course_name 属性的修改
        // this.$refs.editDialog.params.course_name = "测试数据";

        // 回显数据必须完成克隆后才能传递
        this.$refs.editDialog.params = {
          course_id: obj.course_id,
          course_teacher_id: obj.teacher_id,
          course_name: obj.course_name,
          course_grade: obj.course_grade,
          // 请求用得参数
          course_time: obj.course_time,
          course_location: obj.course_location,
          course_credit: obj.course_credit,
          course_max_size: obj.course_max_size,
          course_exam_date: obj.course_exam_date,
          course_exam_location: obj.course_exam_location,
        };
        this.$refs.editDialog.teacher_txt = `${obj.teacher_name}_${obj.teacher_number}_${obj.department_name}`;
        // 2-1-3
        let times = obj.course_time.split("-");
        this.$refs.editDialog.course_time_obj = {
          week: times[0] * 1,
          start: times[1] * 1,
          end: times[2] * 1,
        };
      });
      // 模态窗的弹窗是当前改为true后才被创建
      // this.editDialog = true;
    },
  },
  created() {
    this.findCourseList();
  },
};
</script>

<style lang="scss" scoped>
// 样式由父组件 HomePage.vue 提供
// .el-card {
//   height: 100%;
//   box-sizing: border-box;
// }
// .el-input {
//   width: 140px;
//   margin-right: 10px;
// }
// .btns {
//   display: flex;
//   flex-flow: row nowrap;
//   justify-content: space-between;
//   margin-bottom: 20px;
// }
// .el-tag {
//   display: block;
//   text-align: center;
// }
// .el-pagination {
//   margin-top: 20px;
//   text-align: center;
// }
</style>
